<template>
  <div ref="pieEcharts" class="pieEcharts" />
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    const chart = echarts.init(this.$refs.pieEcharts)
    const mockData = [
      { value: 1000, name: 'Android' },
      { value: 800, name: 'IOS' },
      { value: 500, name: 'PC Web' },
      { value: 200, name: 'Wap Web' }
    ]

    const colors1 = ['#6D48DC', '#24C9FF', '#D200FF', '#8A1D89']
    const colors2 = ['#6D48DC', '#24ABFF', '#BD00FF', '#7C1D8C']
    const colors3 = ['#4B4CDC', '#248DFF', '#BD00FF', '#70218F']
    const options = {
      tooltip: {
        backgroundColor: 'rgba(0,0,0,.5)',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          type: 'pie',
          radius: [40, 80],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {},
          data: mockData.map((el, index) => {
            return {
              ...el,
              label: {
                normal: {
                  textStyle: {
                    // 字体颜色渐变  扇颜色保持一致
                    color: colors3[index],
                    fontSize: 12
                  }
                }
              },
              itemStyle: {
                normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colors1[index] }, // 柱图渐变色
                    { offset: 0.5, color: colors2[index] }, // 柱图渐变色
                    { offset: 1, color: colors3[index] } // 柱图渐变色
                  ])
                }
              }
            }
          })
        }
      ]
    }
    chart.setOption(options)
  }
}
</script>
<style lang="scss" scoped>
.pieEcharts {
  width: 100%;
  height: 100%;
}
</style>
